<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <title>BamZB流媒体直播</title>
    <link rel="stylesheet" href="/mdui/css/mdui.min.css"/>
    <link href="/video-js-5.19.2/video-js.css" rel="stylesheet">
    <script src="/video-js-5.19.2/video.js"></script>
    <script src="/video-js-5.19.2/lang/zh-CN.js"></script>
    <script src="/video-js-5.19.2/videojs-contrib-hls.js"></script>
    <style type="text/css">
        /*暂停时显示播放按钮*/
        .vjs-paused .vjs-big-play-button,
        .vjs-paused.vjs-has-started .vjs-big-play-button {
            display: block;
        }

        /*播放按钮变○圆形*/
        .video-js .vjs-big-play-button {
            font-size: 2.5em;
            line-height: 2.3em;
            height: 2.5em;
            width: 2.5em;
            -webkit-border-radius: 2.5em;
            -moz-border-radius: 2.5em;
            border-radius: 2.5em;
            background-color: #73859f;
            background-color: rgba(115, 133, 159, .5);
            border-width: 0.15em;
            margin-top: -1.25em;
            margin-left: -1.75em;
        }

        /* 中间的播放箭头 */
        .vjs-big-play-button .vjs-icon-placeholder {
            font-size: 1.63em;
        }

        /* 加载圆圈 */
        .vjs-loading-spinner {
            font-size: 2.5em;
            width: 2em;
            height: 2em;
            border-radius: 1em;
            margin-top: -1em;
            margin-left: -1.5em;
        }

        /*点击屏幕播放/暂停*/
        .video-js.vjs-playing .vjs-tech {
            pointer-events: auto;
        }

        /*进度显示当前播放时间*/
        .video-js .vjs-time-control {
            display: block;
        }

        .video-js .vjs-remaining-time {
            display: none;
        }
    </style>
</head>

<body class="mdui-drawer-body-left mdui-appbar-with-toolbar   mdui-theme-primary-blue-grey mdui-theme-accent-blue-grey mdui-bottom-nav-fixed">
<!-- mdui-appbar-scroll-hide -->
<div class="mdui-appbar mdui-appbar-fixed ">
    <div class="mdui-toolbar mdui-color-theme">
            <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white"
                  mdui-drawer="{target: '#main-drawer', swipe: true}"><i
                    class="mdui-icon material-icons">menu</i></span>
        <a href="/" class="mdui-typo-headline">BamZB</a>
        <div class="mdui-toolbar-spacer"></div>
        <span class="mdui-btn mdui-btn-icon mdui-ripple mdui-ripple-white" mdui-dialog="{target: '#dialog-docs-theme'}"
              mdui-tooltip="{content: '设置主题'}"><i class="mdui-icon material-icons">color_lens</i></span>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '链接库'}"><i
                class="mdui-icon material-icons">&#xe250;</i></a>
        <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-tooltip="{content: '更多'}"><i
                class="mdui-icon material-icons">&#xe5d4;</i></a>
    </div>
</div>
<div class="mdui-drawer" id="main-drawer">
    <div class="mdui-row">
        <div class="mdui-col-sm-6 mdui-col-md-12">
            <div class="mdui-card">
                <div class="mdui-card-header">
                    <img class="mdui-card-header-avatar" src="/img/avatar1.jpg"/>
                    <div class="mdui-card-header-title">Bam</div>
                    <div class="mdui-card-header-subtitle">格物致知，知行合一</div>
                </div>
                <div class="mdui-card-media">
                    <img src="/img/card.jpg"/>
                    <div class="mdui-card-media-covered">
                        <div class="mdui-card-primary">
                            <div class="mdui-card-primary-title">Good</div>
                            <div class="mdui-card-primary-subtitle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mdui-list" mdui-collapse="{accordion: true}" style="margin-bottom: 76px;">
        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue-grey">A</i>
                <div class="mdui-list-item-content">目录1</div>
                <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-collapse-item-body mdui-list">
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">1</a>
            </div>
        </div>

        <div class="mdui-collapse-item ">
            <div class="mdui-collapse-item-header mdui-list-item mdui-ripple">
                <i class="mdui-list-item-icon mdui-icon material-icons mdui-text-color-blue-grey">B</i>
                <div class="mdui-list-item-content">目录2</div>
                <i class="mdui-collapse-item-arrow mdui-icon material-icons">keyboard_arrow_down</i>
            </div>
            <div class="mdui-collapse-item-body mdui-list">
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
                <a href="javascript:;" class="mdui-list-item mdui-ripple ">2</a>
            </div>
        </div>
    </div>
</div>
<div class="mdui-dialog" id="dialog-docs-theme">
    <div class="mdui-dialog-title">设置文档主题</div>
    <div class="mdui-dialog-content">
        <p class="mdui-typo-title">主题色</p>
        <div class="mdui-row-xs-1 mdui-row-sm-2 mdui-row-md-3">
            <div class="mdui-col">
                <label class="mdui-radio mdui-m-b-1">
                    <input type="radio" name="doc-theme-layout" value="" checked/>
                    <i class="mdui-radio-icon"></i>
                    Light
                </label>
            </div>
            <div class="mdui-col">
                <label class="mdui-radio mdui-m-b-1">
                    <input type="radio" name="doc-theme-layout" value="dark"/>
                    <i class="mdui-radio-icon"></i>
                    Dark
                </label>
            </div>
        </div>

    </div>
    <div class="mdui-divider"></div>
    <div class="mdui-dialog-actions">
        <button class="mdui-btn mdui-ripple mdui-float-left" mdui-dialog-cancel>恢复默认主题</button>
        <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>ok</button>
    </div>
</div>

<div class="mdui-container">
    <div class="mdui-row">
        <div class="mdui-col-sm-6 mdui-col-md-12">
            <div class="mdui-card">

                <div class="mdui-card-primary">
                    <div class="mdui-card-primary-title" th:text="${roomid}"></div>
                    <div class="mdui-card-primary-subtitle" th:text="|欢迎来到【${roomid}】的直播间！|"></div>
                </div>
                <div class="mdui-card-content" th:text="|公告：「直播流地址=》${roomsrc},直播流类型=》${roomtype}」|"></div>
                <div class="mdui-card-media">
                    <video id="roomVideo" class="video-js vjs-default-skin vjs-big-play-centered mdui-video-fluid">
                        <source th:src="@{${roomsrc}}" th:attr="type=${roomtype}">
                        <p class="vjs-no-js">
                            您的浏览器不支持HTML5，请升级浏览器。
                        </p>
                    </video>
                </div>
            </div>
        </div>
    </div>

</div>
<!-- mdui-bottom-nav-scroll-hide -->
<div class="mdui-bottom-nav mdui-bottom-nav-text-auto  mdui-color-blue-grey">
    <a href="javascript:;" class="mdui-typo-headline">&COPY;BamZB</a>
    <div class="mdui-toolbar-spacer"></div>
    <a href="https://www.mdui.org/docs/media" class="mdui-typo-headline">DMDUI</a>
</div>
<script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.js"></script>
<script src="/mdui/js/mdui.min.js"></script>
<script th:inline="javascript">
    var $$ = mdui.JQ;
    // var html =
    //     '<select class="mdui-select" mdui-select>' +
    //     '  <option value="1">State 1</option>' +
    //     '  <option value="2">State 2</option>' +
    //     '  <option value="3">State 3</option>' +
    //     '</select>';

    // // 动态添加了一个 Select 组件，但通过自定义属性调用时，该组件无法自动初始化
    // $$('body').append(html);
    // //mdui.updateTables() 方法来重新初始化表格
    // // 调用该方法，将初始化页面中所有未初始化的组件。
    // mdui.mutation();
    /*<![CDATA[*/
    var videosrc = /*[[${roomsrc}]]*/ '';
    var videotype = /*[[${roomtype}]]*/ '';
    console.log(videosrc)
    console.log(videotype)
    /*]]>*/
    videojs.options.flash.swf = "/video-js-5.19.2/video-js.swf";
    var options = {
        // width: 580,
        // height: 350,
        autoplay: true, /*自动播放否*/
        preload: "true", /*预加载：string；'auto'|'true'|'metadata'|'none'*/
        poster: '/img/billboard.png', /*预览图：string*/
        controls: true, /*显示底部控制栏*/
        loop: false, /*循环播放否*/
        muted: false, /*音频*/
        language: 'zh-CN', /*语言*/
        techOrder: ['html5', 'flash'],
        controlBar: {
            volumeMenuButton: {
                inline: false,
                vertical: true
            }/*竖着的音量条*/
        },
        fluid: true,
        playbackRates: [0.5, 1, 1.5, 2]// 播放速度
    };
    var player = videojs('roomVideo', options, function onPlayerReady() {
        videojs.log('video播放器已经准备好!');
        this.play();
        this.on('loadstart', function () {
            //开始加载
            videojs.log('loadstart')

        });
        this.on('ended', function () {
            videojs.log('ended!');
        });
        this.on('loadedmetadata', function () {
            videojs.log('loadedmetadata加载到元数据后开始播放视频');
        })
        this.on('ended', function () {
            videojs.log('ended')
        })
        this.on('firstplay', function () {
            videojs.log('firstplay')
        })

        this.on('loadeddata', function () {
            videojs.log('loadeddata')
        })
        this.on('seeking', function () {
            //正在去拿视频流的路上
            videojs.log('seeking')
        })
        this.on('seeked', function () {
            //已经拿到视频流,可以播放
            videojs.log('seeked')
        })
        this.on('waiting', function () {
            videojs.log('waiting')
            this.pause();
        })
        this.on('pause', function () {
            videojs.log('pause')
        })
        this.on('play', function () {
            videojs.log('play')
        })
    });

    /*  var isVideoPlaying = setInterval(function(){

      },200);
      clearInterval(isVideoPlaying);*/

    /*    player.src="http://static.qiakr.com/movie/0080108.mp4";
        player.load();
        player.width(300).height(200);
        player.paly();*/
</script>
</body>

</html>